<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="assets/images/favicon.png" type="image/png">
  <title></title>

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="assets/plugins/timepicker/bootstrap-timepicker.min.css" rel="stylesheet">
    <link href="assets/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="assets/plugins/clockpicker/css/bootstrap-clockpicker.min.css" rel="stylesheet">
    <link href="assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    <!-- END PAGE LEVEL STYLES -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="js/html5shiv.min.js"></script>
          <script src="js/respond.min.js"></script>
    <![endif]-->

</head>

<body class="sticky-header">

    <!--Start left side Menu-->
    <div class="left-side sticky-left-side">

        <!--logo-->
        <div class="logo">
            <a href="index.html"><img src="assets/images/logo.png" alt=""></a>
        </div>

        <div class="logo-icon text-center">
            <a href="index.html"><img src="assets/images/logo-icon.png" alt=""></a>
        </div>
        <!--logo-->

        <div class="left-side-inner">
            <!--Sidebar nav-->
            <ul class="nav nav-pills nav-stacked custom-nav">
                <li class="menu-list"><a href="index.html"><i class="icon-home"></i> <span>Dashboard</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="index.html"> Dashboard 1</a></li>
                        <li><a href="dashboard2.html"> Dashboard 2</a></li>
                    </ul>
                </li>

                <li class="menu-list"><a href="#"><i class="icon-layers"></i> <span>UI Elements</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="ui-buttons.html"> Buttons</a></li>
                        <li ><a href="ui-panels.html"> Panels</a></li>
                        <li><a href="ui-sweet-alert.html">Sweet alert</a></li>
                        <li><a href="ui-progressbar.html">Progressbar</a></li>
                        <li><a href="ui-alert-notification.html">Alert &amp; notification</a></li>
                        <li><a href="ui-checkbox-radio.html">Checkbox-radios</a></li>
                        <li><a href="ui-range-slider.html">Range slider</a></li>
                        <li><a href="ui-modals-tooltip.html">Modals Tooltip</a></li>
                        <li><a href="typography.html">Typography</a></li>
                    </ul>
                </li>
                
                <li class="menu-list"><a href="#"><i class="icon-grid"></i> <span>Tables</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="table-static.html"> Basic Table</a></li>
                        <li><a href="table-responsive.html">Responsive Table</a></li>
                        <li><a href="table-datatable.html">Data Tables</a></li>
                    </ul>
                </li>

                <li class="menu-list"><a href="#"><i class="icon-envelope-open"></i> <span>Mail</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="inbox.html"> Inbox</a></li>
                        <li> <a href="compose.html"> Compose Mail</a></li>
                        <li><a href="message-view.html"> View Mail</a></li>
                    </ul>
                </li>

                <li class="menu-list nav-active"><a href="#"><i class="icon-loop"></i> <span>Forms</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="form-basic.html"> Form Layouts</a></li>
                        <li><a href="form-element.html"> Form Components</a></li>
                        <li ><a href="form-wizard.html"> Form Wizards</a></li>
                        <li  class="active"><a href="form-pickers.html"> Form Pickers</a></li>
                        <li><a href="form-validation.html"> Form Validation</a></li>
                        <li><a href="image-crop.html">Image Crop</a></li>
                        <li><a href="form-xeditable.html">X-editable</a></li>
                        <li><a href="form-editors.html">Editors</a></li>
                        <li><a href="form-upload.html">File Dropzone</a></li>
                    </ul>
                </li>
                
                
                <li class="menu-list"><a href="#"><i class="icon-film"></i> <span>Icons</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="icon-font-awesome.html"> Fontawesome</a></li>
                        <li><a href="icon-simple-lineicon.html">Simple Line Icon</a></li>
                        <li><a href="icon-themify.html">Themify Icons</a></li>
                        <li><a href="icon-material-design.html">Material Design Icons</a></li>
                         <li><a href="icon-ion.html">Ions Icon </a></li>
                    </ul>
                </li>
                
                
                <li><a href="calendar.html"><i class="icon-note"></i> <span>Calendar</span></a></li>
                 <li><a href="widget.html"><i class="icon-wrench"></i> <span>Widget</span></a></li>
                
                <li class="menu-list"><a href="#"><i class="icon-pie-chart"></i> <span>Charts</span></a>
                    <ul class="sub-menu-list">
                    <li><a href="flot-chart.html"> Flot Charts</a></li>
                    <li><a href="morris-chart.html"> Morris Charts</a></li>
                    <li><a href="chart-js.html"> Chartjs</a></li>
                    <li><a href="chart-sparkline.html"> Chart Sparkline</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href="#"><i class="icon-location-pin"></i> <span>Maps</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="google-map.html"> Google Map</a></li>
                        <li><a href="vector-map.html"> Vector Map</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href="#"><i class="icon-folder"></i> <span>Extra Pages</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="faq.html"> FAQ</a></li>
                        <li><a href="profile.html"> Profile</a></li>
                        <li><a href="invoice.html"> Invoice</a></li>
                        <li><a href="timeline.html"> Timeline</a></li>
                        <li><a href="email-template.html"> Email Template</a></li>
                        <li><a href="pricing-table.html"> Pricing Table</a></li>
                        <li><a href="search-result.html"> Search Result</a></li>
                        <li><a href="error-400.html"> 400 Error</a></li>
                        <li><a href="error-403.html"> 403 Error</a></li>
                        <li><a href="error-404.html"> 404 Error</a></li>
                        <li><a href="error-500.html"> 500 Error</a></li>
                        <li><a href="error-503.html"> 503 Error</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href="#"><i class="icon-lock"></i> <span>Login</span></a>
                    <ul class="sub-menu-list">
                       <li><a href="login.html"> Login </a></li>
                       <li><a href="forgot-password.html"> Forgot Password </a></li>
                        <li><a href="registration.html"> Registration </a></li>
                        <li><a href="locked.html"> Lockscreen </a></li>
                    </ul>
                </li>

            </ul>
            <!--End sidebar nav-->

        </div>
    </div>
    <!--End left side menu-->

    
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

            <a class="toggle-btn"><i class="fa fa-bars"></i></a>

            <form class="searchform">
                <input type="text" class="form-control" name="keyword" placeholder="Search here..." />
            </form>

            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-tasks"></i>
                            <span class="badge">8</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">You have 8 pending task</h5>
                            <ul class="dropdown-list">
                            <li class="notification-scroll-list notification-list ">
                               <!-- list item-->
                               <a href="javascript:void(0);" class="list-group-item">
                                  <div class="media">
                                     <div class="pull-left p-r-10">
                                        <em class="fa  fa-shopping-cart noti-primary"></em>
                                     </div>
                                     <div class="media-body">
                                        <h5 class="media-heading">A new order has been placed.</h5>
                                        <p class="m-0">
                                            <small>29 min ago</small>
                                        </p>
                                     </div>
                                  </div>
                               </a>
                    
                               <!-- list item-->
                               <a href="javascript:void(0);" class="list-group-item">
                                  <div class="media">
                                     <div class="pull-left p-r-10">
                                        <em class="fa fa-check noti-success"></em>
                                     </div>
                                     <div class="media-body">
                                        <h5 class="media-heading">Databse backup is complete</h5>
                                        <p class="m-0">
                                            <small>12 min ago</small>
                                        </p>
                                     </div>
                                  </div>
                               </a>
                    
                               <!-- list item-->
                               <a href="javascript:void(0);" class="list-group-item">
                                  <div class="media">
                                     <div class="pull-left p-r-10">
                                        <em class="fa fa-user-plus noti-info"></em>
                                     </div>
                                     <div class="media-body">
                                        <h5 class="media-heading">New user registered</h5>
                                        <p class="m-0">
                                             <small>17 min ago</small>
                                        </p>
                                     </div>
                                  </div>
                               </a>
                    
                                <!-- list item-->
                               <a href="javascript:void(0);" class="list-group-item">
                                  <div class="media">
                                     <div class="pull-left p-r-10">
                                        <em class="fa fa-diamond noti-danger"></em>
                                     </div>
                                     <div class="media-body">
                                        <h5 class="media-heading">Database error.</h5>
                                        <p class="m-0">
                                             <small>11 min ago</small>
                                        </p>
                                     </div>
                                  </div>
                               </a>
                    
                               <!-- list item-->
                               <a href="javascript:void(0);" class="list-group-item">
                                  <div class="media">
                                     <div class="pull-left p-r-10">
                                        <em class="fa fa-cog noti-warning"></em>
                                     </div>
                                     <div class="media-body">
                                        <h5 class="media-heading">New settings</h5>
                                        <p class="m-0">
                                             <small>18 min ago</small>
                                        </p>
                                     </div>
                                  </div>
                               </a>
                             </li>
                             <li class="last"> <a href="#">View all notifications</a> </li>
							</ul>
                        </div>
                    </li>
                    
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-bell-o"></i>
                            <span class="badge">4</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                         <h5 class="title">Notifications</h5>
                        <ul class="dropdown-list normal-list">
						 <li class="message-list message-scroll-list">
                          <a href="#">
                              <span class="photo"> <img src="assets/images/users/avatar-8.jpg" class="img-circle" alt="img"></span>
                              <span class="subject">John Doe</span>
                              <span class="message"> New tasks needs to be done</span>
                               <span class="time">15 minutes ago</span>
                          </a>
                          
                          <a href="#">
                              <span class="photo"> <img src="assets/images/users/avatar-7.jpg" class="img-circle" alt="img"></span>
                              <span class="subject">John Doe</span>
                              <span class="message"> New tasks needs to be done</span>
                               <span class="time">10 minutes ago</span>
                          </a>
                        
                          <a href="#">
                              <span class="photo"> <img src="assets/images/users/avatar-6.jpg" class="img-circle" alt="img"></span>
                               <span class="subject">John Doe</span>
                               <span class="message"> New tasks needs to be done</span>
                              <span class="time">20 minutes ago</span>
                          </a>
                         
                          <a href="#">
                              <span class="photo"> <img src="assets/images/users/avatar-6.jpg" class="img-circle" alt="img"></span>
                               <span class="subject">John Doe</span>
                               <span class="message"> New tasks needs to be done</span>
                              <span class="time">20 minutes ago</span>
                          </a>
                        
                          <a href="#">
                              <span class="photo"> <img src="assets/images/users/avatar-6.jpg" class="img-circle" alt="img"></span>
                               <span class="subject">John Doe</span>
                               <span class="message"> New tasks needs to be done</span>
                              <span class="time">20 minutes ago</span>
                          </a>
                          
                          <a href="#">
                              <span class="photo"> <img src="assets/images/users/avatar-6.jpg" class="img-circle" alt="img"></span>
                               <span class="subject">John Doe</span>
                               <span class="message"> New tasks needs to be done</span>
                              <span class="time">20 minutes ago</span>
                          </a>
						</li>
						<li class="last"> <a  href="#">All Messages</a> </li>
					</ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="assets/images/users/avatar-6.jpg" alt="" />
                            John Doe
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                          <li> <a href="#"> <i class="fa fa-wrench"></i> Settings </a> </li>
                          <li> <a href="#"> <i class="fa fa-user"></i> Profile </a> </li>
                          <li> <a href="#"> <i class="fa fa-info"></i> Help </a> </li>
                          <li> <a href="#"> <i class="fa fa-lock"></i> Logout </a> </li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->

        <!--body wrapper start-->
        <div class="wrapper">
              
              <!--Start Page Title-->
               <div class="page-title-box">
                    <h4 class="page-title">Form Pickers</h4>
                    <ol class="breadcrumb">
                        <li>
                            <a href="#">Dashboard</a>
                        </li>
                        <li>
                            <a href="#">Form</a>
                        </li>
                        <li class="active">
                            Form Pickers
                        </li>
                    </ol>
                    <div class="clearfix"></div>
                 </div>
                  <!--End Page Title-->          
           
                <!--Start row-->
                  <div class="row">
                    <div class="col-md-6">
                        <div class="white-box">
                             <h2 class="header-title"> Clock Picker</h2>
                                <div class="form-group">
                                <label>Default Clock Picker</label>
                                    <div class="input-group clockpicker">
                                        <input type="text" class="form-control" value="09:30">
                                        <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span>
                                    </div>
                                </div>
                                
                                 <div class="form-group">
                                  <label>Auto close</label>
                                   <div class="input-group clockpicker " data-placement="top" data-align="top" data-autoclose="true">
                                    <input type="text" class="form-control" value="13:14">
                                  <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span>
                              </div>
                           </div>
                        </div>
                    </div> 
                     
                    <div class="col-md-6">
                        <div class="white-box">
                             <h2 class="header-title"> Clock Picker</h2>
                               <div class="form-group">
                                <label>Now time</label>
                                <div class="input-group">
                                    <input class="form-control" id="single-input" value="" placeholder="Now">
                                    <span class="input-group-btn">
                                        <button type="button" id="check-minutes" class="btn waves-effect waves-light btn-primary">Check the minutes</button>
                                    </span>
                                </div>
                               </div>
                                
                                <div class="form-group">
                                  <label>Place at left, align the arrow to top </label>
                                  <div class="input-group clockpicker" data-placement="top" data-align="top">
                                    <input type="text" class="form-control" value="13:14">
                                    <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span>
                                </div>
                              </div>
                         </div>
                    </div>
                    
                    </div>
                <!--End row-->
                
                
                <!--Start row-->
                <div class="row">
                <div class="col-md-12">
                    <div class="white-box">
                        <h2 class="header-title"> Date Range Picker  </h2>
                            <form class="form-horizontal">
                            
                                <div class="form-group">
                                    <label class="col-md-4 control-label">With all options</label>
                                    <div class="col-md-8">
                                        <div id="reportrange" class="pull-right form-control">
                                            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="col-md-4 control-label">Date Range Picker</label>
                                    <div class="col-md-8">
                                        <input class="form-control input-daterange-datepicker" type="text" name="daterange" value="01/01/2015 - 01/31/2015"/>
                                    </div>
                                </div>
 
                                <div class="form-group">
                                    <label class="col-md-4 control-label">Date Range With Time</label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control input-daterange-timepicker" name="daterange" value="01/01/2015 1:30 PM - 01/01/2015 2:00 PM"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label">Limit Selectable Dates</label>
                                    <div class="col-md-8">
                                        <input class="form-control input-limit-datepicker" type="text" name="daterange" value="06/01/2015 - 06/07/2015"/>
                                    </div>
                              </div>
                            </form>
                      </div>
                </div>
                </div>
                <!--End row-->
                
                <!--Start row-->
                <div class="row">
                    <div class="col-md-12">
                       <div class="white-box">
                            <div class="col-md-8">
                             <h2 class="header-title">Date Picker</h2>
                         	    <form action="#" class="form-horizontal">
                                <div class="form-group">
                                    <label class="control-label col-md-4">Default Functionality</label>
                                    <div class="col-md-8">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker">
                                            <span class="input-group-addon b-0 text-white"><i class="icon-calender"></i></span>
                                        </div> 
                                    </div>
                                </div>
			                                		
                                <div class="form-group">
                                    <label class="control-label col-md-4">Auto Close</label>
                                    <div class="col-md-8">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-autoclose">
                                            <span class="input-group-addon b-0 text-white"><i class="icon-calender"></i></span>
                                        </div> 
                                    </div>
                                </div>
			                                		
                                <div class="form-group">
                                    <label class="control-label col-md-4">Multiple Date</label>
                                    <div class="col-md-8">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-multiple-date">
                                            <span class="input-group-addon b-0 text-white"><i class="icon-calender"></i></span>
                                        </div> 
                                    </div>
                                </div>
			                                		
                            <div class="form-group">
                                <label class="control-label col-md-4">Date Range</label>
                                <div class="col-md-8">
                                    <div class="input-daterange input-group" id="date-range">
                                        <input type="text" class="form-control" name="start" />
                                        <span class="input-group-addon no-border text-white">to</span>
                                        <input type="text" class="form-control" name="end" />
                                    </div>
                                </div>
                            </div>
						</form>
                            </div>
                            
                            <div class="col-md-4">
                                 <div class="header-title">Datepicker Inline</div>
                                 <label>Inline</label>
                                    <div class="input-group">
                                        <div id="datepicker-inline"></div>
                                    </div>
                            </div>
                       </div>
                    </div>
                </div>
                <!--End row-->
                
                
               <!-- Start row-->
               <div class="row">
               <div class="col-md-6">
                 <div class="white-box">
                   <h2 class="header-title">Timepicker </h2>
                   <div class="form-group">
                        <label>Default Time Picker</label>
                        <div class="input-group">
                            <div class="bootstrap-timepicker">
                                <input id="timepicker" type="text" class="form-control">
                            </div>
                            <span class="input-group-addon b-0 text-white"><i class="glyphicon glyphicon-time"></i></span>
                        </div>
                   </div>
                  
                   <div class="form-group">
                    <label>24 Hour Mode Time Picker</label>
                    <div class="input-group">
                        <div class="bootstrap-timepicker">
                            <input id="timepicker2" type="text" class="form-control">
                        </div>
                        <span class="input-group-addon b-0 text-white"><i class="glyphicon glyphicon-time"></i></span>
                    </div>
                   </div>
                   
                   <div class="form-group">
                   <label>Specify a step for the minute field</label>
                      <div class="input-group">
                        <div class="bootstrap-timepicker">
                            <input id="timepicker3" type="text" class="form-control">
                        </div>
                        <span class="input-group-addon b-0 text-white"><i class="glyphicon glyphicon-time"></i></span>
                    </div>
    
                   </div>
                  </div>
               </div>

                       
               <div class="col-md-6">
                   <div class="white-box">
                       <h2 class="header-title">Colorpicker</h2>
                            <form action="#">
                                <div class="form-group">
                                    <label>Default</label>
                                    <input type="text" class="colorpicker-default form-control" value="#8fff00">
                                </div>
                                
                                <div class="form-group">
                                    <label>RGBA</label>
                                    <input type="text" class="colorpicker-rgba form-control" value="rgb(0,194,255,0.78)" data-color-format="rgba">
                                </div>
                                
                                <div class="form-group">
                                    <label>As Component</label>
                                    <div data-color-format="rgb" data-color="rgb(255, 146, 180)" class="colorpicker-default input-group">
                                        <input type="text" readonly="readonly" value="" class="form-control">
                                        <span class="input-group-btn add-on">
                                            <button class="btn btn-white" type="button">
                                                <i style="background-color: rgb(124, 66, 84);margin-top: 2px;"></i>
                                            </button> 
                                        </span>
                                    </div>
                                </div>
                                
                            </form>
                       </div>
                  </div>
                        
               </div>
               <!-- End row-->
 
            </div>
      <!-- End Wrapper-->


        <!--Start  Footer -->
        <footer class="footer-main">Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://www.17sucai.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></footer>	
         <!--End footer -->

       </div>
      <!--End main content -->
    


    <!--Begin core plugin -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/plugins/moment/moment.js"></script>
    <script  src="assets/js/jquery.slimscroll.js "></script>
    <script src="assets/js/jquery.nicescroll.js"></script>
    <script src="assets/js/functions.js"></script>
    <!-- End core plugin -->

    <!-- BEGIN PAGE LEVEL SCRIPTS -->
	<script src="assets/plugins/moment/moment.js"></script>
    <script src="assets/plugins/timepicker/bootstrap-timepicker.js"></script>
    <script src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
    <script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="assets/plugins/clockpicker/js/bootstrap-clockpicker.min.js"></script>
    <script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
	<script>
    // Time Picker
            jQuery('#timepicker').timepicker({
                defaultTIme : false
            });
            jQuery('#timepicker2').timepicker({
                showMeridian : false
            });
            jQuery('#timepicker3').timepicker({
                minuteStep : 15
            });
            
            //colorpicker start

            $('.colorpicker-default').colorpicker({
                format: 'hex'
            });
            $('.colorpicker-rgba').colorpicker();
            
            // Date Picker
            jQuery('#datepicker').datepicker();
            jQuery('#datepicker-autoclose').datepicker({
                autoclose: true,
                todayHighlight: true
            });
            jQuery('#datepicker-inline').datepicker();
            jQuery('#datepicker-multiple-date').datepicker({
                format: "mm/dd/yyyy",
                clearBtn: true,
                multidate: true,
                multidateSeparator: ","
            });
            jQuery('#date-range').datepicker({
                toggleActive: true
            });
            
            //Clock Picker
            $('.clockpicker').clockpicker({
                donetext: 'Done'
            });
            
            $('#single-input').clockpicker({
                placement: 'bottom',
                align: 'left',
                autoclose: true,
                'default': 'now'
            });
            $('#check-minutes').click(function(e){
                // Have to stop propagation here
                e.stopPropagation();
                $("#single-input").clockpicker('show')
                        .clockpicker('toggleView', 'minutes');
            });
            
            
            //Date range picker
            $('.input-daterange-datepicker').daterangepicker({
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-default',
                cancelClass: 'btn-white'
            });
            $('.input-daterange-timepicker').daterangepicker({
                timePicker: true,
                timePickerIncrement: 30,
                locale: {
                    format: 'MM/DD/YYYY h:mm A'
                },
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-default',
                cancelClass: 'btn-white'
            });
            $('.input-limit-datepicker').daterangepicker({
                format: 'MM/DD/YYYY',
                minDate: '06/01/2015',
                maxDate: '06/30/2015',
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-default',
                cancelClass: 'btn-white',
                dateLimit: {
                    days: 6
                }
            });
    
            $('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
    
            $('#reportrange').daterangepicker({
                format: 'MM/DD/YYYY',
                startDate: moment().subtract(29, 'days'),
                endDate: moment(),
                minDate: '01/01/2012',
                maxDate: '12/31/2015',
                dateLimit: {
                    days: 60
                },
                showDropdowns: true,
                showWeekNumbers: true,
                timePicker: false,
                timePickerIncrement: 1,
                timePicker12Hour: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                opens: 'left',
                drops: 'down',
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-default',
                cancelClass: 'btn-white',
                separator: ' to ',
                locale: {
                    applyLabel: 'Submit',
                    cancelLabel: 'Cancel',
                    fromLabel: 'From',
                    toLabel: 'To',
                    customRangeLabel: 'Custom',
                    daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    firstDay: 1
                }
            }, function (start, end, label) {
                console.log(start.toISOString(), end.toISOString(), label);
                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            });
    </script>

    <!-- BEGIN PAGE LEVEL SCRIPTS -->


</body>

</html>
